﻿<!DOCTYPE html>
<html lang="en">
<head th:replace="~{parts/head}">

<!-- page wrapper -->
<body>

    <div class="boxed_wrapper">

        <!-- preloader -->
        <div class="preloader"></div>
        <!-- preloader -->


        <!-- main header -->
        <header class="main-header style-three">

            <!-- header-lower -->
            <div class="header-lower">
                <div class="outer-box clearfix">
                    <div class="left-column">
                        <div class="logo-box">
                            <figure class="logo"><a href="/"><img src="../../images/logo-3.png" alt=""></a></figure>
                        </div>
                        <div th:replace="~{parts/menu-area}">
                    </div>
                    <div class="right-column pull-right">
                        <div th:replace="~{parts/author-box}">
                    </div>
                </div>
            </div>

            <!--sticky Header-->
            <div class="sticky-header">
                <div class="auto-container">
                    <div class="outer-box">
                        <div class="logo-box">
                            <figure class="logo"><a href="/"><img src="../../images/small-logo.png" alt=""></a></figure>
                        </div>
                        <div class="menu-area">
                            <nav class="main-menu clearfix">
                                <!--Keep This Empty / Menu will come through Javascript-->
                            </nav>
                        </div>
<!--                        <div class="btn-box"><a href="register-page.html" class="theme-btn-one"><i class="icon-image"></i>Join Now</a></div>-->
                    </div>
                </div>
            </div>
        </header>
        <!-- main-header end -->

        <!-- Mobile Menu  -->
        <div class="mobile-menu">
            <div class="menu-backdrop"></div>
            <div class="close-btn"><i class="fas fa-times"></i></div>
            
            <nav class="menu-box">
                <div class="nav-logo"><a href="/"><img src="../../images/logo-2.png" alt="" title=""></a></div>
                <div class="menu-outer"><!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header--></div>
                <div class="contact-info">
                    <h4>Contact Info</h4>
                    <ul>
                        <li>Chicago 12, Melborne City, USA</li>
                        <li><a href="">+88 01682648101</a></li>
                        <li><a href="mailto:info@example.com">info@example.com</a></li>
                    </ul>
                </div>
                <div class="social-links">
                    <ul class="clearfix">
                        <li><a href="/"><span class="fab fa-twitter"></span></a></li>
                        <li><a href="/"><span class="fab fa-facebook-square"></span></a></li>
                        <li><a href="/"><span class="fab fa-pinterest-p"></span></a></li>
                        <li><a href="/"><span class="fab fa-instagram"></span></a></li>
                        <li><a href="/"><span class="fab fa-youtube"></span></a></li>
                    </ul>
                </div>
            </nav>
        </div><!-- End Mobile Menu -->


        <!--page-title-two-->
        <section class="page-title-two">
            <div class="title-box centred bg-color-2">
                <div class="pattern-layer">
                    <div class="pattern-1" style="background-image: url(../../images/shape/shape-70.png);"></div>
                    <div class="pattern-2" style="background-image: url(../../images/shape/shape-71.png);"></div>
                </div>
                <div class="auto-container">
                    <div class="title">
                        <h1>消息</h1>
                    </div>
                </div>
            </div>
            <div class="lower-content">
                <ul class="bread-crumb clearfix">
                    <li><a href="/">主页</a></li>
                    <li><a style="cursor: pointer" onclick="window.history.back(-1);">上一页</a></li>
                    <li>消息</li>
                </ul>
            </div>
        </section>
        <!--page-title-two end-->


        <!-- doctors-dashboard -->
        <section class="doctors-dashboard bg-color-3">
            <div class="right-panel">
                <div class="content-container">
                    <div class="outer-container">
                        <div class="message-box">
                            <div class="title-box">
                                <h3>消息列表</h3>
                            </div>
                            <div class="chat-room" id="chat-room">
                                <div id="frame" th:fragment="chat">
                                    <div id="sidepanel">
                                        <div class="side-title"><h3>聊天</h3></div>
                                        <div id="search">
                                            <button><i class="far fa-search"></i></button>
                                            <input type="text" placeholder="搜索" />
                                        </div>
                                        <div id="contacts">
                                            <ul id="chat-list">
                                                <li class="contact" th:each="item:${chats}" th:data-user_id="${item.userId}" th:id="${'chat-list-'+item.userId}" onclick="showChat(this.getAttribute('data-user_id'));">
                                                    <div class="wrap">
                                                        <span class="contact-status online"></span>
                                                        <img th:src="${item.userIcon}" alt="" />
                                                        <div class="meta">
                                                            <h5 th:text="${item.userNm}">Rex Allen</h5>
                                                            <p class="preview" th:text="${item.latestMsg}">Hey, How are you?</p>
                                                            <span class="chat-time" th:text="${item.formatTime}">12 min</span>
                                                            <span class="hidden-chat" th:text="${item.unreadCount}" th:if="${item.unreadCount ne 0}">2</span>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="content">
                                        <div class="contact-profile">
                                            <img th:src="${target.icon}" alt="" />
                                            <div class="meta">
                                                <span class="d-none" th:text="${target.id}" id="target-id">Bradshaw</span>
                                                <h5 th:text="${target.name}">Bradshaw</h5>
                                                <p th:text="${target.mail}">Stay at home, Stay safe</p>
                                            </div>
                                        </div>
                                        <div class="messages" id="messages">
                                            <ul th:fragment="content" id="msg-content">
                                                <th:block th:each="item:${messages}">
                                                <li class="sent" th:if="${item.receiverId eq user.id}">
                                                    <img th:src="${target.icon}" alt="" />
                                                    <p th:text="${item.content}"></p>
                                                    <span class="time" th:text="${item.formatTime}">4:32 PM</span>
                                                </li>
                                                <li class="replies clearfix" th:if="${item.senderId eq user.id}">
                                                    <img th:src="${user.icon}" alt="" />
                                                    <div class="text">
                                                        <p th:text="${item.content}">Lorem ipsum dolor sit amet consectetur adipisicing sed.</p>
                                                        <span class="time" th:text="${item.formatTime}">4:40 PM</span>
                                                    </div>
                                                </li>
                                                </th:block>
                                            </ul>
                                        </div>
                                        <div class="message-input">
                                            <div class="wrap">
                                            <input type="text" placeholder="输入内容" id="content" onkeypress="keypress(event)"/>
<!--                                            <i class="icon-Circle-point attachment" aria-hidden="true"></i>-->
                                            <i class="fas fa-comment attachment" aria-hidden="true"></i>
                                            <button onclick="sendMsg()"><i class="icon-Arrow-Right" aria-hidden="true"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- doctors-dashboard -->


        <!-- main-footer -->
        <div th:replace="~{parts/main-footer}"></div>
        <!-- main-footer end -->
        <div th:replace="~{parts/alert-modal}"></div>

        <!--Scroll to top-->
        <button class="scroll-top scroll-to-target" data-target="html" onclick='location.href=("/message?targetId=6")'>
            <img src="../../images/robot-2.png">
        </button>
    </div>

    <script th:replace="~{parts/js}"></script>
    <script>
        $('#doc_tab').addClass("current");
        $(".messages").animate({ scrollTop: $('#msg-content').height() }, "fast");
        $('#chat-list').children(":first").addClass("hidden-message");
        // 发送信息
        function sendMsg() {
            let msg = $('#content').val();
            if($.trim(msg) == '') {
                return false;
            }
            $.ajax({
                type: "post",
                url:"/message/send",
                cache: false,
                data: {
                    senderId: $('#user-id').text(),
                    receiverId: $('#target-id').text(),
                    content: msg
                },
                success: function (data) {
                    $('#messages').html(data);
                },
                error: function(res) {
                },
                complete: function (res) {
                    $('.message-input input').val(null);
                    $(".messages").animate({ scrollTop: $('#msg-content').height() }, "fast");
                }
            });
        }
        //  给 input 类型绑定回车事件
        function keypress(event) {
            if(event.keyCode == "13"){
                sendMsg();
            }
        }

        function showChat(targetId) {
            $.ajax({
                type: "post",
                url:"/message/get",
                cache: false,
                data: {
                    targetId: targetId,
                },
                success: function (data) {
                    $('#chat-room').html(data);

                },
                error: function(res) {
                },
                complete: function (res) {
                    $('#chat-list-'+targetId).addClass("hidden-message");
                    $('.message-input input').val(null);
                    $(".messages").animate({ scrollTop: $('#msg-content').height() }, "fast");
                }
            });

        }
    </script>
    <style>
        .right-panel .content-container {
             margin-left: 0;
        }
        .right-panel .outer-container {
            max-width: none;
        }
        #frame .content .messages ul li.sent {
            padding: 36px 0 0 75px;
        }
        #frame .content .messages ul li.replies {
            padding: 40px 75px 0 0;
        }
    </style>

</body><!-- End of .page_wrapper -->
</html>
